<template>
  <div>
    <div class="login-box">
      <h3>户籍管理系统</h3>
      <el-form label-width="80px">
        <el-form-item :label="title">
          <el-input v-model="name" :placeholder="placeholder"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="pwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="value" placeholder="请选择登录身份">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button id="login" @click="login" style="width: 50%" type="primary"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import MockAdmin from "../../mockData/admin.js";
import MockPerson from "../../mockData/person.js";
import { storage } from "../../utils/storage";
export default {
  data() {
    return {
      name: "",
      pwd: "",
      value: "",
      options: [
        {
          value: "person",
          label: "用户"
        },
        {
          value: "admin",
          label: "管理员"
        }
      ]
    };
  },
  computed: {
    title: function() {
      return this.value == "person" ? "身份证号" : "账号";
    },
    placeholder: function() {
      return this.value == "person" ? "请输入身份证号" : "请输入账号";
    }
  },
  methods: {
    login() {
      if (this.name == "" || this.pwd == "") {
        this.$message.error("请输入完整账号信息");
        return;
      } else if (this.value == "") {
        this.$message.error("请选择登录身份");
        return;
      }
      if (!storage.getStorage("admin")) {
        storage.setStorage("admin", MockAdmin);
      }
      if (!storage.getStorage("person")) {
        storage.setStorage("person", MockPerson);
      }
      if (this.value == "admin") {
        var matchName = storage.getStorage("admin").filter(item => item.account === this.name)[0];
      } else if (this.value == "person") {
        var matchName = storage.getStorage("person").filter(item => item.idCard === this.name)[0];
      }
      if (matchName == undefined) {
        this.$message.error("您的账号身份输入有误！");
        return;
      } else {
        if (matchName.pwd === this.pwd) {
          sessionStorage.setItem("isLogin", true);
          sessionStorage.setItem("name", matchName.name);
          if (this.value == "person") {
            sessionStorage.setItem("role", "person");
            sessionStorage.setItem("id", matchName.userId);
          }
          if (this.value == "admin") {
            sessionStorage.setItem("role", matchName.role);
            sessionStorage.setItem("type", matchName.type);
            sessionStorage.setItem("id", matchName.id);
          }
          this.$message({
            message: "登陆成功",
            type: "success"
          });
          this.$router.push("/home");
        } else {
          this.$message.error("您的密码输入有误！");
        }
      }
    }
  }
};
</script>

<style lang="scss">
.login-box {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  .el-form-item__content {
    text-align: left;
    .el-select {
      width: 160px;
    }
  }
  h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin: 100px 0 60px;
  }
}
</style>

